import React from "react";
import { Link, useLocation } from "react-router-dom";
import "./style.css";
import classnames from "classnames";
import { Badge } from "antd-mobile";
import { PlusCircleOutlined } from "@ant-design/icons";

function Footer() {
  const { pathname } = useLocation();
  if (pathname == "/add" || pathname == "/search") return;
  return (
    <div id="footer-bar-main">
      <Link to="/" className={classnames({ active: pathname == "/" })}>
        <span>首页</span>
      </Link>
      <Link to="/shop" className={classnames({ active: pathname == "/shop" })}>
        <span>购物</span>
      </Link>
      <Link to="/add" className={classnames({ active: pathname == "/add" })}>
        <span>
          <PlusCircleOutlined />
        </span>
      </Link>
      <Link
        to="/message"
        className={classnames({ active: pathname == "/message" })}
      >
        <Badge content="1">
          <span>消息</span>
        </Badge>
      </Link>
      <Link to="/mine" className={classnames({ active: pathname == "/mine" })}>
        <span>我</span>
      </Link>
    </div>
  );
}

export default Footer;
